<!-- 发现页的首页 -->
<template>
  <div class="find-wrap">
    <div class="headtit">
      <div class="btn"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-left.6f6409e"></use></svg></div>
      <h1>发现</h1>
    </div>
    <div class="activity">
      <div class="find-top">
        <div class="entry">
          <a href="#" :key="index" :class="`a${index+1}`" v-for="(item,index) in activity">
            <div>
              <h1 :style="{color:item.title_color}">{{item.title}}</h1>
              <p>{{item.subtitle}}</p>
            </div>
            <img :src="`https://fuss10.elemecdn.com/${item.main_pic_hash}.jpeg??imageMogr/format/webp/`" alt="">
          </a>
        </div>
      </div>

      <div class="find-btm">
        <img src="https://fuss10.elemecdn.com/b/6d/656006edcd86033a1b32b23ddea37jpeg.jpeg?imageMogr/format/webp/" alt="">
      </div>
    </div>

    <div class="hot-food">
      <div class="title">
        <div class="name">
          <span></span>
          <h1>美食热推</h1>
          <span></span>
        </div>
        <p>你的口味，我都懂得</p>
      </div>
      <div class="content">
        <a href="#" :key="index" v-for="(item,index) in hot">
          <img :src="`https://fuss10.elemecdn.com/${item.foods[0].image_hash
}.jpeg?imageMogr/format/webp/`" alt="">
          <p>{{item.foods[0].name}}</p>
          <span>¥{{item.foods[0].price}}</span>
        </a>
      </div>
      <a href="#" class="more">查看更多 &gt;</a>
    </div>

    <div class="time-limit">
      <div class="title">
        <div class="name">
          <span></span>
          <h1>限时好礼</h1>
          <span></span>
        </div>
        <p>小积分换豪礼</p>
      </div>
      <div class="content">
        <a href="#" :key="index" v-for="(item,index) in limit">
          <i>{{item.corner_marker}}</i>
          <img :src="`https://fuss10.elemecdn.com/${item.image_hash}.jpeg?imageMogr/format/webp/`" alt="">
          <p>{{item.title}}</p>
          <span>{{item.points_required}}积分<em>￥{{item.original_price}}</em></span>
        </a>
      </div>
      <a href="#" class="more">查看更多 &gt;</a>
    </div>

    <div class="foot">
      <div class="tab">
        <router-link to="/">
          <svg class="index-footerTabIcon_1EbB8wS"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#index-regular.b245d60"></use></svg>
          <span>外卖</span>
        </router-link>
        <router-link to="/find">
          <svg class="index-footerTabIcon_1EbB8wS"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#discover.5811137"></use></svg>
          <span class="on">发现</span>
        </router-link>
        <router-link to="/order">
          <svg class="index-footerTabIcon_1EbB8wS"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#order-regular.41c17f8"></use></svg>
          <span>订单</span>
        </router-link>
        <router-link to="/profile">
          <svg class="index-footerTabIcon_1EbB8wS"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#profile-regular.c151d62"></use></svg>
          <span>我的</span>
        </router-link>
      </div> 
    </div>

  </div>
</template>

<script>
  export default{
    name:'find',
    data () {
      return{
        activity:[],
        hot:[],
        limit:[]
      }
    },
    mounted () {
      // 获取积分商城的数据
      if(!sessionStorage.getItem('activity')){
        this.$http.get('http://localhost:3000/activity').then(function(res){
          var data = res.data[1];
          sessionStorage.setItem('activity',JSON.stringify(data))
          var activity = sessionStorage.getItem('activity') 
          this.activityList = JSON.parse(activity)
          if(data) this.activity = data;
          
        },function(error){
          console.log(error)
        })
      }else{
      this.activity = JSON.parse(sessionStorage.getItem('activity'))
    }

      // 获取美食热推的数据
      this.$http.get('http://localhost:3000/hot').then(function(res){
        var data = res.data;
        if(data) this.hot = data;
        
      },function(error){
        console.log(error)
      })

      // 获取积分商城的数据
      this.$http.get('http://localhost:3000/limit').then(function(res){
        var data = res.data;
        console.log(data)
        if(data) this.limit = data;
        
      },function(error){
        console.log(error)
      })

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
*{box-sizing:border-box;}
.entry{overflow: hidden;}
.headtit{height: .88rem; background-image: linear-gradient(90deg,#0af,#0085ff); position: fixed; top:0; width: 100%; z-index: 1000; display: flex;text-align: center; line-height: .88rem; justify-content: center;}
.headtit .btn{height: .88rem; width: .88rem; display: flex; align-items: center; justify-content: center; position: absolute; left:0; top:0;}
.headtit svg{height: .44rem; width: .44rem;}
.headtit h1{color: #fff; font-size: .35rem;}
.find-wrap{width:100%;}
.entry a{ display: block; padding: .48rem .3rem; width: 50%; float: right; color: #000;}
.entry a h1{font-size: .36rem; font-weight:normal; line-height: 1.2; margin-bottom: .1rem;}
.entry a img{width: .9rem; height: .9rem;}
.entry a p{font-size: .24rem; color: #999;}
.entry .a1{float: left; border-right: 1px solid #eee;}
.entry .a1 img{width: 1.5rem; height: 1.5rem; margin-top: .3rem; margin-left: 50%; transform: translatex(-50%);}
.entry .a2{border-bottom: 1px solid #eee;}
.entry .a2,.entry .a3{display: flex; justify-content:space-between;}
.activity {padding-top:.88rem;}
.activity > div{border-bottom: .2rem solid #eee;}
.find-btm img{width: 100%;}
.hot-food{border-bottom: .2rem solid #eee;}
.title{text-align: center;}
.title .name{display: flex; align-items: center; justify-content:center; line-height: 1.2; padding-top: .39rem;}
.title h1{font-size: .38rem;margin:0 .2rem; display: inline-block;}
.title span{height: 1px; width: .4rem;background: #000; display: inline-block;}
.title p{font-size: .22rem; color: #999;padding-bottom: .16rem;}
.content{padding:.24rem 0 .3rem .3rem;}
.content > a{margin-right: .12rem; display: inline-block;position: relative;}
.content img{width: 2.2rem; height: 2.2rem; margin-bottom: .19rem;display: block;}
.content p{font-size: .25rem;margin-bottom: .1rem; line-height: 1.2; color: #333;width:2.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.content a > span{font-size: .24rem; color: #ff5339;line-height: 1.5; display: inline-block;}
.content i{position: absolute; padding: 0 .1rem; background: #413d3c; font-size: .24rem; color: #fff; line-height: 1.5; top:0; left:0;}
.more{display: block; font-size: .25rem; color: #999; text-align: center; padding-bottom: .36rem; line-height: 1.2;}
.time-limit{padding-bottom: 1rem;}
.time-limit .content span em{color: #aaa; font-size: .2rem; text-decoration:line-through; margin-left: .1rem;}

.foot{position: fixed; bottom:0; left: 0; width: 100%; border-top: 1px solid #ccc; background: #fff; z-index: 1000;}
.tab{ display: flex; justify-content: space-between; height: 1rem; align-items:center; padding-top: .09rem;}
.tab a{display: flex; font-size: .22rem; flex-direction: column; align-items: center; width: 25%; color: #666;}
.tab a span{line-height: 1.4; display: block;}
.tab svg{width: .4rem; height: .4rem; margin-bottom: .03rem;}
.foot .on{color: #0089dc;}
</style>